<template>
  <!-- 标题页面 -->
  <div class="topic">
    <ul>
      <li v-for="item in topicData.data" :key="item.id">
        <img :src="item.scene_pic_url" alt="" />
        <h3>{{ item.title }}</h3>
        <span>{{ item.subtitle }}</span>
        <p>{{ item.price_info | RMB }}</p>
      </li>
    </ul>
    <van-pagination
      v-model="currentPage"
      :page-count="totalPages"
      mode="multi"
      show-page-size="0"
      @change="skip"
    />
  </div>
</template>

<script>
import { GetTopicData } from "@/request/api";
export default {
  data() {
    return {
      topicData: [],
      currentPage: 1,
      totalPages: null,
    };
  },
  components: {},
  created() {
    GetTopicData({ page: this.currentPage, size: "10" })
      .then((res) => {
        this.topicData = res.data;
        this.totalPages = res.data.totalPages;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  filters: {
    RMB(val) {
      return "￥" + val.toFixed(2) + " 元起";
    },
  },
  methods: {
    skip() {
      // console.log(this.currentPage);
      GetTopicData({ page: this.currentPage, size: "10" })
        .then((res) => {
          console.log(res.data);
          this.topicData = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.topic {
  padding-bottom: 0.1rem;
}
ul {
  li {
    background-color: #fff;
    text-align: center;
    margin-bottom: 0.2rem;
    img {
      width: 100%;
    }
    h3,
    span,
    p {
      line-height: 40px;
      height: 40px;
    }
    p {
      color: brown;
      font-size: 0.16rem;
    }
    h3 {
      font-size: 0.16rem;
    }
  }
}
</style>